<style lang="less">
  .okokok {
    display: block;
    button {
      background-color: transparent;
      padding: 0;
      margin: 0;
      display: block;
      width: 100%;
      height: 100%;
      border: none;
      padding-left: 0;
      padding-right: 0;
      border-radius: 0;
      font-size: 0rpx;
      &::after {
        content: "";
        width: 0;
        height: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
        display: none;
        background-color: transparent;
      }
      view {
        // width: 100%;
        height: 100%;
      }
    }
  }
  .mview {
    padding-top: 30rpx;
    // 控制每行图标数目
    width: 20%; // border-bottom: 1px solid #eee;
  }
.icon-btn {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: space-between;
  flex-wrap: wrap;
  .icon {
    @size: 80rpx;
    width: @size;
    height: @size;
  }
  text {
    width: 100%;
    display: block;
    margin-top: 2rpx;
    font-size: 28rpx;
  }
}
</style>

<template>
  <form @submit="cache" class="okokok mview jwc no-verify" report-submit>
    <button formType="submit">
      <!-- slot mpvue 智能渲染静态内容 -->
      <div class="icon-btn">
        <image class="icon" :src="iconsrc"/>
        <text>{{item.name}}</text>
      </div>
    </button>
  </form>
</template>

<script>
  export default {

    props: {
      item: {
        type: Object
      }
    },

    computed: {
      iconsrc () {
        return '/static/icon/index/' + this.item.icon + '.svg'
      }
    },

    methods: {
      cache (e) {
        console.log(this.item.name + ':' + this.item.url)
        // if (e.detail.formId === 'the formId is a mock one') {
        //   console.log('现在处于微信开发者工具！')
        //   return
        // }
        // this.POST('/user/msg_id', {
        //   'ids': e.detail.formId
        // }, false)
      }
    }

  }
</script>
